<template>
  <div class="login-box">
    <div class="login">
      <!-- 左侧 -->
      <div class="left">
        <div class="title">家庭医生后台管理系统</div>
        <div class="img">
          <img src="../../assets/u1111.png" alt="">
        </div>
      </div>
      <!-- 右侧 -->
      <div class="right">
        <img src="../../assets/u408.jpg" alt="" width="40" height="40" :clearable="true">
        <h1 style="margin-bottom: 40px;">欢迎登录</h1>
        <el-form :model="formData">
          <el-form-item :clearable="true" style="">
            <!-- <el-input v-model="formData.phone" clearable /> -->
            <el-input v-model="formData.phone" placeholder="请输入手机号" :clearable="true" autocomplete="on" />
          </el-form-item>
          <el-form-item>
            <el-input v-model="formData.password" placeholder="请输入密码" clearable autocomplete="on" />
          </el-form-item :>
        </el-form>
        <div class="checkbox">
          <input type="checkbox" v-model="isCheckbox">
          <span>我已阅读并同意<span class="a">《用户隐私政策》</span></span>
        </div>
        <el-button type="primary" @click="login">登录</el-button>
        <div class="tip">忘记密码请联系管理员</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { loginApi } from '@/api/login';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const formData = ref<any>({});

const isCheckbox = ref(true);

async function login() {
  if (!isCheckbox.value) {
    ElMessage.error('请先阅读协议');
    return;
  }
  const res = await loginApi(formData.value);
  if (res.code == 200) {
    localStorage.admin_token = res.token;
    ElMessage.success('登录成功');
    router.replace('/admin/index');
  } else {
    ElMessage.error(res.message);
  }
}

</script>

<style scoped lang="scss">
.el-button:hover {
  background-color: var(--el-color-primary);
  border-color: var(--el-color-primary);
}

.el-input {
  margin: 0 auto;
}

:deep(.el-input__wrapper) {
  height: 44px;

  padding: 0 10px;

  border-radius: 8px;

  background-color: #F2F7FB;

  box-shadow: none;
}

[data-v-f5731108] .el-form {
  margin: 0;
}

.el-form-item {
  width: 334px;
}

:deep(.el-form) {
  margin: 20px 0;
}

.el-form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.login-box {
  width: 100%;
  height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  background-color: #F2F7FB;

  .login {
    display: flex;
  }

  .left,
  .right {
    width: 600px;
    min-height: 660px;
  }

  .left {
    display: flex;
    flex-direction: column;

    background-color: #2984F8;
    border-radius: 6px 0 0 6px;
  }

  .right {
    background-color: #fff;
    border-radius: 0 6px 6px 0;

    text-align: center;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-top: 60px;
    box-sizing: border-box;

    height: 300px;

    h1 {
      font-size: 28px;
      color: #333;
      font-weight: bold;
    }

    input {
      vertical-align: middle;

      margin-right: 10px;
    }

    .checkbox {
      width: 334px;

      text-align: start;
    }

    span {
      font-size: 13px;
      color: #c9c9c9;
    }

    .a {
      color: #2984F8;
      cursor: pointer;
    }

    button {
      width: 334px;
      height: 44px;

      border-radius: 8px;

      box-shadow: 0 0 6px #1a6cd8;

      font-size: 16px;

      margin: 20px 0;
    }

    .tip {
      color: #ccc;
      font-size: 13px;
    }
  }

  .title {
    font-size: 16px;
    color: #fff;

    margin: 20px 0 0 20px;
  }

  .img {
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>